<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理能力</title>
    <script src="../vue.global.js"></script>
    <style>
        .red{
            color:red;
        }
        .font-big{
            font-size: 50px;
        }
    </style>
</head>
<body>

<div id="App">
    {{counter}}
    <button v-on:click.once="counter++">counter++</button>
    <button v-on:keyup.enter="counter++">counter++/keyup.enter</button>
    <button v-on:click="addNumber(55)">counter++</button>
    <button v-on:click="addNumber1(55,$event)">counter++</button>

    <div v-on:click="counter++">
        <button v-on:click.stop="addNumber1(2,$event)">counter++/事件修饰符</button>
    </div>

</div>


<script>



    const App = {

        data(){
            return {
                counter:100,
            }
        },
        methods:{
            addNumber(num){
                this.counter+=num;

                console.log(event)// 隐匿传递
            },
            addNumber1(num,e){
                this.counter+=num;

                console.log(e)
            }
        },
        computed:{

        }
    };

    const vm = Vue.createApp(App).mount("#App")


</script>
</body>
</html>